<!--菜单按钮 -->
<template>
  <div id="button-group-main" >
    <div class="con-btns">
      <div class="img-button" v-for="item in buttons">
        <Tooltip  :content=item.caption>
          <img  :src="item.src"
                @click="menuClick(item.id)"
                @mouseover="mouseEnter(item.id)"
                @mouseleave="mouseLeave(item.id)"/>
        </Tooltip>
      </div>
      <img  :src="thesrc" v-show="false"/>
<!--      <button @click="click">KK</button>-->
    </div>
<!--    <div class="img-button" v-for="item in buttons">
      <Tooltip  :content=item.caption placement="top-start">
        <img  :src="item.src"
              @click="menuClick(item.id)"
              @mouseover="mouseEnter(item.id)"
              @mouseleave="mouseLeave(item.id)"/>
        &lt;!&ndash;      <img class="img-button" :ref="item.ref"  :style="item.style"
                   @click="menuClick(item.id)" @mouseover="mouseEnter(item.id)" @mouseleave="mouseLeave(item.id)"
              />&ndash;&gt;
      </Tooltip>
    </div>-->

<!--    <div v-for="item in buttons" class="img-button" :ref="item.ref"  :style="item.style"
         :title="item.caption"
         @click="menuClick(item.id)" @mouseover="mouseEnter(item.id)" @mouseleave="mouseLeave(item.id)">
    </div>-->
  </div>

</template>
<script>
import ssdd1 from "./img/buttongroup/ssdd-11.png";
import spqg1 from "./img/buttongroup/spqg-11.png";
import lskj1 from "./img/buttongroup/lskj-11.png";
import sqkl1 from "./img/buttongroup/sqkl-11.png";
import djbb1 from "./img/buttongroup/djbb-11.png";
import bjkl1 from "./img/buttongroup/bjkl-11.png";
import znaikl1 from "./img/buttongroup/znaikl-11.png";
import dpzs1 from "./img/buttongroup/dpzs-11.png";

import ssdd0 from "./img/buttongroup/ssdd-00.png";
import spqg0 from "./img/buttongroup/spqg-00.png";
import lskj0 from "./img/buttongroup/lskj-00.png";
import sqkl0 from "./img/buttongroup/sqkl-00.png";
import djbb0 from "./img/buttongroup/djbb-00.png";
import bjkl0 from "./img/buttongroup/bjkl-00.png";
import znaikl0 from "./img/buttongroup/znaikl-00.png";
import dpzs0 from "./img/buttongroup/dpzs-00.png";

import ssdd2 from "./img/buttongroup/ssdd-22.png";
import spqg2 from "./img/buttongroup/spqg-22.png";
import lskj2 from "./img/buttongroup/lskj-22.png";
import sqkl2 from "./img/buttongroup/sqkl-22.png";
import djbb2 from "./img/buttongroup/djbb-22.png";
import bjkl2 from "./img/buttongroup/bjkl-22.png";
import znaikl2 from "./img/buttongroup/znaikl-22.png";
import dpzs2 from "./img/buttongroup/dpzs-22.png";

import ssdd3 from "./img/buttongroup/ssdd-33.png";
import spqg3 from "./img/buttongroup/spqg-33.png";
import lskj3 from "./img/buttongroup/lskj-33.png";
import sqkl3 from "./img/buttongroup/sqkl-33.png";
import djbb3 from "./img/buttongroup/djbb-33.png";
import bjkl3 from "./img/buttongroup/bjkl-33.png";
import znaikl3 from "./img/buttongroup/znaikl-33.png";
import dpzs3 from "./img/buttongroup/dpzs-33.png";
import AuthCheck from '@/api/AuthCheck';
export default {
  name: "ButtonGroup",
  props:{
  },
  watch:{
  },
  computed:{
    buttons(){
      return [
        {id:1,ref:"button1",disabled:false,caption:this.$t('command_dispatch'),src:ssdd0,current:false,future:false},//"指挥调度"
        {id:2,ref:"button2",disabled:false,caption:this.$t('video_monitoring'),src:spqg0,current:false,future:false},//视频监控
        {id:3,ref:"button3",disabled:false,caption:this.$t('historical_track'),src:lskj0,current:false,future:false},//历史轨迹
        {id:4,ref:"button4",disabled:false,caption:this.$t('data_manage'),src:sqkl0,current:false,future:false},//信息管理
        {id:5,ref:"button5",disabled:false,caption:this.$t('statistics_report'),src:djbb0,current:false,future:false},//统计报表
        {id:6,ref:"button6",disabled:false,caption:this.$t('alarm_manage'),src:bjkl0,current:false,future:false},//报警管理
        {id:7,ref:"button7",disabled:true,caption:this.$t('ai_manage'),src:znaikl0,current:false,future:true},//智能AI管理
        {id:8,ref:"button8",disabled:false,caption:this.$t('large_screen_display'),src:dpzs0,current:false,future:false},//大屏展示
      ]
    }
  },
  data(){
    return{
      thesrc:null,
      imgs0:[ssdd0,spqg0,lskj0,sqkl0,djbb0,bjkl0,znaikl0,dpzs0],//正常图
      imgs1:[ssdd1,spqg1,lskj1,sqkl1,djbb1,bjkl1,znaikl1,dpzs1],//当前页面图
      imgs2:[ssdd2,spqg2,lskj2,sqkl2,djbb2,bjkl2,znaikl2,dpzs2],//灰色图
      imgs3:[ssdd3,spqg3,lskj3,sqkl3,djbb3,bjkl3,znaikl3,dpzs3],//高亮图
    }
  },
  methods:{
    menuClick(index){
      if (this.buttons[index-1].disabled || this.buttons[index-1].current){
        return;
      }

      if (index === 1){
        /** 指挥调度 */
        this.$router.push('/commandDispatch');
      }else if (index === 2){
        this.$router.push('/multiScreenPlay');
      }else if (index === 3){
        /** 历史回放 */
        this.$router.push('/moveTrackPlay');
      }else if (index === 4){
        /** 数据管理 */
        this.$router.push('/data_main');

      }else if (index === 5){
        /** 数据统计 */
        this.$router.push('/statistics');
      }else if (index === 6){
        /** 报警管理 */
        this.$router.push('/alarmManage');
      }else if (index === 7){
        /** 智能AI管理 */
      }else if (index === 8){
        /** 大屏展示 */
        this.$router.push('/fullScreen');
      }
    },
    mouseEnter(index){
      if (!this.buttons[index-1].future && !this.buttons[index-1].current){
        this.buttons[index-1].src = this.imgs3[index-1];
      }
    },
    mouseLeave(index){
      if (!this.buttons[index-1].future && !this.buttons[index-1].current){
        this.buttons[index-1].src = this.imgs0[index-1];
      }
    },

    refresh(){
      for(let i in this.buttons){
        //console.log(">>>>>>>>>ButtonGroup.refresh: %o,%o,%o",this.buttons[i].caption,this.buttons[i].future,this.buttons[i].current)
        //加了这一行才会刷新  this.thesrc=
        if (this.buttons[i].disabled){
            this.thesrc=this.imgs2[i];
            this.buttons[i].src = this.imgs2[i];
        }else if (this.buttons[i].future){ //暂不支持的功能
            this.thesrc=this.imgs2[i];
            this.buttons[i].src = this.imgs2[i];
        }else if (this.buttons[i].current) {
            this.thesrc=this.imgs1[i];
            this.buttons[i].src = this.imgs1[i]; //当前页
        }else {
            this.thesrc=this.imgs0[i];
            this.buttons[i].src = this.imgs0[i]; //正常页
        }
      }
    },
    changeCurrent(index){
      //console.log(">>>>>>>>>ButtonGroup.changeCurrent: %o",index)

      for(let i in this.buttons){
        //console.log(">>>>>>>>>ButtonGroup.changeCurrent: %o,%o,%o",this.buttons[i].caption,this.buttons[i].future,this.buttons[i].current)
        if (i == index-1)
          this.buttons[i].current = true;
        else
          this.buttons[i].current = false;
        //console.log(">>>>>>>>>ButtonGroup.changeCurrent: %o,%o,%o",this.buttons[i].caption,this.buttons[i].future,this.buttons[i].current)
      }

      this.refresh();
    },
  },
  mounted() {
    const authCheck = new AuthCheck();
    this.buttons[0].disabled = !authCheck.commandDispatch();
    this.buttons[1].disabled = !authCheck.multiScreenPlay();
    this.buttons[2].disabled = !authCheck.moveTrackPlay();
    this.buttons[3].disabled = !authCheck.dataMain();
    this.buttons[4].disabled = !authCheck.statistics();
    this.buttons[5].disabled = !authCheck.alarmManage();
    this.refresh();
  }
}

</script>
<style lang="less">
#button-group-main{
  width: 100%;
  height: 100%;
  .con-btns{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: left;
    //border: 0.5px solid #e30c0c;
    /*  .img-buttons{
        width: 100%;
        display: flex;
        justify-content: left;*/
    .img-button{
      //margin-top: 5px;
      margin-left: 10px;
      width: 56px;
      height: 50px;
      cursor: pointer;
      //border: 0.5px solid #84e8d7;
    }

  }


}
</style>
